<template>
  <div id="components-layout-demo-basic">
    <a-layout style="background-color: white ">
      <a-layout-header>
        <div class="head_group">
          <a-button @click="back">返回</a-button>
          <a-button style="float:right;" @click="add" :disabled="isDisabled">添加</a-button>
        </div>
        <hr color="#00a0e9"/>
      </a-layout-header>

      <a-layout-content>
        <a-table
          :columns="columns"
          :data-source="educationList"
          rowKey='id'
          :pagination="false"
          :scroll="{ y: heightTable }"
          size="middle"
          bordered>
          <template  slot="operation" slot-scope="text, record">
            <div style="text-align: center;">
              <a @click="handleEdit(record.id)" style="margin-right: 10px;" :disabled="isDisabled">编辑</a>
              <a type="danger"  @click="handleDelete(record.id)" :disabled="isDisabled">删除</a>
            </div>
          </template >
        </a-table>
      </a-layout-content>

      <a-layout-footer style="background-color: white;">
        <a-pagination
          show-quick-jumper
          v-model="pagination.page"
          :page-size-options="pagination.pageSizeOptions"
          :total="pagination.total"
          show-size-changer
          :page-size="pagination.pageSize"
          @change="onChangePagination"
          @showSizeChange="onShowSizeChange"
        >
          <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value !== '100'">{{ props.value }}条/页</span>
            <!--            <span v-if="props.value === '50'">全部</span>-->
          </template>
        </a-pagination>

      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script>

    import {getAction,postAction,putAction,deleteAction} from '@/api/manage'

    //布局占据的位数
    const formItemLayout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 12 },
        labelColTextarea: { span: 2 },
        wrapperColTextarea: { span: 16 },
    };
    const columns = [
        {
            title: '序号',
            dataIndex: 'serialNumber',
            width: '5%',
            scopedSlots: { customRender: 'serialNumber' },
        },
        {
            title: '姓名',
            dataIndex: 'name',
            width: '7%',
            scopedSlots: { customRender: 'name' },
        },
        {
            title: '学位',
            dataIndex: 'degree_dictText',
            width: '5%',
        },
        {
            title: '专业',
            dataIndex: 'professional',
            width: '15%',
            scopedSlots: { customRender: 'professional' },
        },
        {
            title: '毕业学校',
            dataIndex: 'school',
            width: '15%',
            scopedSlots: { customRender: 'school' },
        },
        {
            title: '学习形式',
            // dataIndex: 'learningForm_dictText',
            dataIndex: 'learningForm',
            width: '7%',
        },
        {
            title: '开始时间',
            dataIndex: 'startDate',
            width: '7%',
            scopedSlots: { customRender: 'startDate' },
        },
        {
            title: '结束时间',
            dataIndex: 'endDate',
            width: '7%',
            scopedSlots: { customRender: 'endDate' },
        },
        {
            title: '是否全日制',
            dataIndex: 'isFullTime',
            width: '7%',
        },
        {
            title: '是否最高学历 ',
            dataIndex: 'isMaxEducationString',
            width: '7%',
        },
        {
            title: '操作',
            dataIndex: 'operation',
            scopedSlots: { customRender: 'operation' },
        },
    ];

    //已占领的高度
    let occupyHeight = 400;

    export default {
        name: "Education",
        data(){
            return{
                paneKey:1,
                //控件占一半位置
                widthLayout:{
                    width:'60%',
                },
                //控件是否能编辑
                isDisabled:true,
                //table高度
                heightTable:0,
                //布局占据的位数
                formItemLayout,
                //列表列
                columns,
                //分页
                pagination: {
                    page:1,//当前页数
                    pageSize: 10,//每页中显示10条数据
                    total: 0,
                    showSizeChanger: true,
                    pageSizeOptions: ['10', '20', '30', '40', '50'],//每页中显示的数据
                    showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
                },
                basicId:null,
                //列表数据
                educationList: [],
                //是否有基本信息
                isExists:false,
            }
        },
        // mounted() {
        //     //获取高度值
        //     window.onresize = () => {
        //         this.heightTable = document.documentElement.clientHeight-occupyHeight;
        //         console.log("education = > tableHeight = ",this.heightTable)
        //     }
        // },
        methods:{
            //初始化
            init(basicId){
                if(basicId>0){
                    this.basicId = basicId;
                    this.isExists = true;
                }
                if(this.isExists){
                    let that = this;
                    postAction(`/educational/education-message/list/${that.pagination.page}/${that.pagination.pageSize}/${that.basicId}`).then(res=>{
                        console.log("dataSource = ",res.result);
                        that.educationList = res.result.records;
                        that.pagination.total = res.result.total;
                        that.pagination.page = res.result.current;
                        that.pagination.pageSize = res.result.size;
                    })
                }
            },
            //返回列表
            back(){
                // this.$router.push("/internship/list")
                this.$emit('pane-back',this.paneKey,0)
            },
            //获取父组件中isDisable
            isDisable(isDisabled){
                this.isDisabled = isDisabled;
            },
            //添加数据
            add(){
                if(!this.isExists){
                    this.$message.info('不存在基本信息，请先填完基本信息保存后再填写！');
                    return;
                }
                // this.$router.push("/education/details/"+this.basicId+"/0");
                //2表示，0表示编辑的id
                this.$emit('router-pane',2,this.basicId,0)
            },
            //编辑
            handleEdit(id ) {
                // this.$router.push("/education/details/"+this.basicId+"/"+id);
                //2表示，0表示编辑的id
                this.$emit('router-pane',2,this.basicId,id)
            },
            //删除
            handleDelete(id) {
                let that = this;
                this.$confirm({
                    title: '警告！',
                    content: '是否删除数据？',
                    okText: '确定',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {
                        that.loading = true;
                        deleteAction("/educational/education-message/delete/"+id).then(resp =>{
                            that.init();
                            console.log("删除数据完成",resp);
                            that.loading = false;
                        }).catch(error=>{
                            console.log("删除数据错误",error);
                        })
                    },
                    onCancel() {
                        console.log('Cancel');
                    },
                });
            },
            //分页触发当前页
            onChangePagination(current){
                this.pagination.page = current;
                this.init();
            },
            //分页大小
            onShowSizeChange(current, pageSize) {
                this.pagination.page = current;//当前页
                this.pagination.pageSize = pageSize;//页数大小
                this.init();
            },
            //加载高度
            initLoadHeight(height,basicId){
                this.heightTable = height-(occupyHeight);
            },
            initBasicId(basicId){
                if(basicId>0){
                    //已有基本信息，可以添加信息
                    this.isExists=true;
                    this.basicId = basicId;
                    this.init();
                }else{
                    //还没有基本信息 ，无法添加其他信息
                    this.isExists=false;
                    this.educationList = [];
                }
            }
        },
        created() {
        }
    }
</script>

<style scoped>



</style>